// reset
// 把变量抽离出去，方便其他地方引用
@import './variables';
* {
    box-sizing: border-box;
    outline: none; // 取消tab高亮
}
html {
    font-size: 13px;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2rem;
    background-color: #f1f1f1;
}
a {
    color: #999;
}
p {
    line-height: 1.5em;
}
// width ,height
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

// text overflow
.text-ellipsis {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// colors 定义颜色,注意是内部逗号结尾，外部分号结尾
// $colors: (
//     'primary': #db9e3f,
//     'white': #fff,
//     'black': #000,
//    'dark':#222,
//    'grey':#999,
//    'grey-1':#666,
//     'info': #4b67af,
//    'light':#f9f9f9,
//    'dark-1':#343440

// );
@each $colorKey,$color in $colors {
    .text-#{$colorKey} {
        color: $color;
    }
    .bg-#{$colorKey} {
        background-color: $color;
    }
}
// text 文字对齐方式
@each $var in (left,center,right) {
    .text-#{$var} {
        text-align: $var !important;
    }
};
// // font size
// $base-font-size: 1rem;
// $font-sizes: (
//     xxs: .615385, // 8px
//     xs: .769231,  // 10px
//     sm: .923077,  //12px
//     md:1,  //13px
//     lg: 1.076923, //14px
//     xl: 1.230769, //16px
//     );
@each $sizeKey,$size in $font-sizes {
    .fs-#{$sizeKey} {
        font-size: $size * $base-font-size;
    }
}

// flex
.d-flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
// $flex-jc: (
//     start: flex-start,
//     end: flex-end,
//     center: center,
//     between: space-between,
//     around:space-around,
// );
@each $key,$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value
    }
}
// $flex-ai: (
//     start: flex-start,
//     end: flex-end,
//     center: center,
//     stretch: stretch,
// );
@each $key,$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value
    }
}
// 拓展整个空余空间
.flex-1 {
    flex: 1
}
//  等同于上一个类，意味着填充整个剩余空间
.flex-grow-1 {
    flex-grow:1
}

// spacing
// 0-5 : 0
// .mt-1 margin top level1; .pb-2 padding bottom level2
// // 类型
// $spacing-types: (m: margin,p: padding);
// // 方向
// $spacing-directions: (t: top,r:right,b:bottom,l:left);
// // 定义单位尺寸
// $pacing-base-size: 1rem;
// $spaceing-sizes: (0:0,1:0.25,2:0.5,3:1,4:1.5,5:3);
// @each $typeKey,$type in $spacing-types {
//     .#{$typeKey} {
//         #{$type}: 0
//     }
// }
// 根据上面的结构，去三级嵌套循环,生成带方位和不带方位的
@each $typeKey,$type in $spacing-types {
    // .m-1 不带方位的形式
        @each $sizeKey,$size in $spaceing-sizes {
            // .m-1 {margin:0.25rem}
            .#{$typeKey}-#{$sizeKey}{ 
                #{$type}:$size*$pacing-base-size}
        }
    // .mt-1 带方位的形式
    @each $directionKey,$direction in $spacing-directions {
        @each $sizeKey,$size in $spaceing-sizes {
            // .mt-1 {margin-top:0.25rem}
            .#{$typeKey}#{$directionKey}-#{$sizeKey}{ 
                #{$type}-#{$direction}:$size*$pacing-base-size
            }
        }
    }
    // .mx-1 水平左右保持一致 .my-1 垂直上下保持一致
            @each $sizeKey,$size in $spaceing-sizes {
            // .mx-1 {margin:0.25rem}
            .#{$typeKey}x-#{$sizeKey}{ 
                #{$type}-left:$size*$pacing-base-size;
                #{$type}-right:$size*$pacing-base-size;
            }
            // .my-1 {margin:0.25rem}   
            .#{$typeKey}y-#{$sizeKey}{ 
                #{$type}-top:$size*$pacing-base-size;
                #{$type}-bottom:$size*$pacing-base-size;
            }
        }
}

// button
.btn {
    border:none;
    border-radius: .153846rem;
    font-size: map-get($font-sizes, 'sm' ) * $base-font-size;
    -webkit-font-smoothing: antialiased;
    padding:0.2rem 0.6rem;
}

// nva 
.nav {
    display: flex;
    // justify-content: space-around;
    .nav-item {
        border-bottom: 3px solid transparent;
        padding-bottom:0.2rem;
        
        &.active {
            // 调整调整默认样式为激活黄色，默认黑色。将激活为白色的设为特例。
            color: map-get($colors,'primary');
            border-bottom: 3px solid map-get($colors,'primary');
            // border-bottom: 3px solid white;
        }
    }
    &.nav-inverse {
        .nav-item {
            color: map-get($map: $colors , $key: 'white');
            &.active {
                border-bottom-color: map-get($map: $colors , $key: 'white');
            }
        }
    }
}

// sprite 
.sprite {
    background: url(../assets/images/index.png) no-repeat 0 0;
    // 一般双倍像素设计
    background-size: 28.846154rem;
    // 要设置宽高必须用 inline-block
    display: inline-block;
    // spritecow.com网站 可以自动定位雪碧图
    &.sprite-news {
    width: 1.769231rem;
	height: 1.538462rem;
    background-position: 63.546% 15.517%;
    }
    &.sprite-arrow {
    width: .769231rem;
	height: .769231rem;
    background-position: 38.577% 52.076%;
    }
    &.sprite-news {
    width: 1.769231rem;
	height: 1.538462rem;
    background-position: 63.546% 15.517%;
    }
    &.sprite-practice {
    width: 1.7692rem;
    height: 1.5385rem;
    background-position: 90.483% 15.614%;
  }
  &.sprite-affair {
    background-position: 36.746% 0.924%;
    width: 1.4615rem;
    height: 1.6923rem;
  }
  &.sprite-mall {
    background-position: 10.408% 15.517%;
    width: 1.5385rem;
    height: 1.5385rem;
    border: none;
  }
  &.sprite-start {
    background-position: 89.733% 1.266%;
    width: 1.5385rem;
    height: 1.6154rem;
  }
  &.sprite-honour {
    background-position: 36.467% 15.287%;
    width: 1.8462rem;
    height: 1.5385rem;
  }
  &.sprite-community {
    background-position: 9.728% 1.266%;
    width: 2rem;
    height: 1.6154rem;
  }
  &.sprite-base {
    margin-top: -3px;
    background-position: 63.3% 0.927%;
    width: 1.8462rem;
    height: 1.8462rem;
  }
  &.sprite-echart {
    background-position: 0 96.207%;
    width: 1.8462rem;
    height: 1.5385rem;
  }
  &.sprite-edition {
    background: url(../assets/images/version-icon.png) no-repeat -1px 0px;
    background-size: 100% 100%;
    width: 1.8462rem;
    height: 1.8462rem;
  }
}

// 3.19 增加边框
// borders
@each $dir in (top,right,bottom,left) {
    .border-#{$dir} {
        border-#{dir}: 1px solid $border-color;
    }
}